<script setup>
import { ref, reactive, watch } from "vue";
import {
  NTabs,
  NTabPane,
  NPagination,
  NSkeleton,
  NSpin,
  useDialog,
  useMessage,
} from "naive-ui";
import { orderStatus } from "@/api/constants";
import { findOrderList, delteOrder, confOrder } from "@/api/order";
// 查询订单参数
const requestParams = reactive({
  page: 1,
  pageSize: 5,
  orderState: 0,
});
const message = useMessage();
const dialog = useDialog();
let loading = ref(false);
let isNull = ref(1);
// 订单列表
const orderList = ref([]);
const orderListCount = ref(null);

const getOrderList = () => {
  findOrderList(requestParams).then((data) => {
    orderList.value = data.items;
    orderListCount.value = data.pages;
    loading.value = false;
    isNull.value = data.counts;
  });
};

watch(
  requestParams,
  () => {
    loading.value = true;
    // 查询订单
    getOrderList();
  },
  {
    immediate: true,
  }
);

// tabs标签变化触发
const updateTabs = (val) => {
  orderList.value = [];
  isNull.value = 1;
  loading.value = true;
  requestParams.page = 1;
  requestParams.orderState = val;
};

// 取消订单
const orderCancelDom = ref(null);
const cancelOrder = (order) => {
  orderCancelDom.value.open(order);
};

// 删除订单
const deleteOrder = (order) => {
  dialog.create({
    title: "提示",
    content: "您确定删除此订单吗？",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: () => {
      loading.value = true;
      delteOrder(order.id)
        .then(() => {
          message.success("删除成功！");
          getOrderList();
        })
        .catch((err) => {
          message.error("删除失败！");
        });
    },
  });
};

// 确认收货
const confirmOrder = (order) => {
  dialog.create({
    title: "提示",
    content: "您确认收货吗？",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: () => {
      loading.value = true;
      confOrder(order.id).then(() => {
        message.success("确认收货成功！");
        order.orderState = 4;
        loading.value = false;
      });
    },
  });
};
// 查看物流
const orderLogisticsDom = ref(null);
const logisticsOrder = (order) => {
  orderLogisticsDom.value.open(order);
};
</script>

<template>
  <div class="order">
    <n-tabs
      @update:value="updateTabs"
      type="line"
      :tabs-padding="40"
      :tab-style="{ paddingTop: '15px' }"
    >
      <n-tab-pane
        style="padding: 0px 20px"
        :name="key"
        :tab="item.label"
        v-for="(item, key) in orderStatus"
        :key="key"
      >
        <div v-if="isNull <= 0" class="order-null">
          <p>暂时没有订单哦</p>
        </div>
        <n-spin :show="loading">
          <div style="min-height: 500px">
            <order-item
              @on-cancel="cancelOrder"
              @on-delete="deleteOrder"
              @on-confirm="confirmOrder"
              @on-logistics="logisticsOrder"
              v-for="(order, index) in orderList"
              :order="order"
              :key="index"
            ></order-item>
          </div>
        </n-spin>
      </n-tab-pane>
    </n-tabs>
    <order-cancel ref="orderCancelDom"></order-cancel>
    <order-logistics ref="orderLogisticsDom"></order-logistics>
    <div class="page">
      <n-pagination
        v-if="orderListCount && orderList.length"
        v-model:page="requestParams.page"
        :page-count="orderListCount || 0"
        show-quick-jumper
      />
    </div>
  </div>
</template>

<style scoped lang='less'>
.order {
  background: #fff;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.page {
  margin-bottom: 35px;
}
.order-null {
  margin: 100px 0px 50px 0px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  p {
    font-size: 18px;
    color: #747474;
  }
}
</style>